<template>
	<view class="chat-permission" v-if="!permission.notice && noticePermissionTip">
		<view class="chat-permission-chunk" @tap.stop="gotoSetting">
			<text class="chat-permission-chunk-icon suifont sui-tongzhi"></text>
			<text class="chat-permission-chunk-tips">点击打开通知权限，及时收到私聊消息</text>
			<view class="chat-permission-chunk-close" @tap.stop="closeTip"><u-icon name="close" color="#F85962" size="20"></u-icon></view>
		</view>
	</view>
</template>

<script>
import { closeNoticePremissionTip } from '@/store/dispatches.js';
import { mapState } from 'vuex';
import permission from '@/js_sdk/AppPermission/permission.js';
export default {
	data() {
		return {
			chunkShow: true
		};
	},
	computed: {
		...mapState({
			noticePermissionTip: state => state.device.noticePermissionTip
		})
	},
	mounted() {
		// #ifndef APP-VUE
		this.chunkShow = false;
		// #endif
	},
	methods: {
		closeTip() {
			closeNoticePremissionTip();
		},
		gotoSetting() {
			permission.gotoAppPermissionSetting();
		}
	}
};
</script>

<style lang="scss">
.chat-permission {
	height: 118rpx;
	background-color: #fff;
	border-bottom: 8rpx solid #f8f8f8;
	display: flex;
	justify-content: center;
	align-items: center;
	&-chunk {
		width: 690rpx;
		height: 88rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px 1px rgba(151, 151, 151, 0.43);
		border-radius: 44rpx;
		display: flex;
		padding-left: 32rpx;
		align-items: center;
		position: relative;
		&-icon {
			font-size: 64rpx;
			color: $theme-main-color;
		}
		&-tips {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(248, 89, 98, 1);
			letter-spacing: 2rpx;
			margin-left: 10px;
		}
		&-close {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>
